<template>
  <div class="company-style">
    <!-- 导航栏 start -->
    <van-nav-bar v-if="navHide" title="海报预览" fixed left-arrow right-text="分享" @click-left="$router.back()"  @click-right="share" />
    <!-- 导航栏 end -->

    <!-- 预览 -->
    <div :class="['jobs-share-preview','colour0'+templetNo,navHide ? 'nav-top':'' ]" >
      <!-- header -->
      <div class="header">
        <p class="logo"></p>
        <p class="time">
          <span>{{new Date().getDate()}}</span>
          <span>{{new Date().getFullYear()+'.'+(new Date().getMonth()+1)}}</span>
          <span>{{'星期'+new Date().getDay()}}</span>
        </p>
      </div>

      <!-- main -->
      <div class="main">
        <!--单个职位-->
        <div class="job" v-if="jobList.length <= 3">
          <div v-for="item,index in jobList" :key="index">
            <p>
              <span>{{item.SalaryMin}}K-{{item.SalaryMax}}K /月</span>
            </p>
            <p>
              <span>{{item.StationName}}</span>
            </p>
            <p>
              <span>{{item.WorkAddressValue2}}</span>
              <span>{{item.Edu_LevelValue}}</span>
              <span>{{item.WorkYearsValue}}</span>
            </p>
          </div>
        </div>

        <!--多个职位-->
        <div class="jobs" v-else>
          <p>
            <span>正在招聘</span>
          </p>
          <p>
            <span>{{jobList[0].StationName}}、{{jobList[1].StationName}}、{{jobList[2].StationName}}等{{jobList.length}}个职位</span>
          </p>
        </div>

        <!-- 企业信息 -->
        <div class="firm">
          <p class="avatar">
            <img :src="jobList[0].LogoUrl" v-if="jobList[0].LogoUrl" />
            <img src="@/assets/img/company/jobs/template/default_avatar.jpg" v-else />
          </p>
          <p class="info">
            <b>{{jobList[0].CompanyName}}</b>
            <span>{{jobList[0].CompanyTypeValue}}</span>
          </p>
          <p class="qrcode">
            <vue-qr :text="qr_text"></vue-qr>
          </p>
        </div>
      </div>

      <!--footer-->
      <div class="footer">海报来源：舟山人才网(www.93job.com)</div>
    </div>
    <!-- 预览 end -->
  </div>
</template>
    
<script>
import { NavBar,Toast } from "vant";
import VueQr from 'vue-qr'
import { returnToPhoneWithData } from '@/util/phone';
export default {
  name: "LivePlay",
  components: {
    [NavBar.name]: NavBar, VueQr
  },
  // 定义属性
  data() {
    return {
      jobIDs: this.$route.query.jobIDs,
      templetNo: this.$route.query.templetNo,
      jobList: [],
      qr_text: '',
			navHide:true,
    };
  },
  created() {
    this.jobList[0] = '';
    // console.log(this.jobIDs);
    // console.log(this.templetNo);
    this.getStationList();
		 window.getpicResult = this.getpicResult;
  },
  // 方法集合
  methods: {
		getpicResult(){
			this.navHide = true;
		},
    getStationList() {
      this.$api.post('/CompanyStation/GetStationListForPoster', this.jobIDs).then(res => {
        if (res.success) {
          this.jobList = res.response;
          if (this.jobList.length == 1) {
            this.qr_text = 'https://m.93job.com/Q/StationInfo.aspx?StationID=' + this.jobList[0].StationID_Main;
          }
          else if (this.jobList.length > 1) {
            this.qr_text = `https://m.93job.com/Q/CompanyInfo.aspx?CompanyID=${this.jobList[0].CompanyID}`;
          }
        }
        else { Toast(res.msg); }
      })
    },
		share(){
			this.navHide=false;
			setTimeout(()=>{returnToPhoneWithData({ action: "get_screen_pic" });},1000)
			setTimeout(()=>{this.navHide=true},3000)
		}
  },
};
</script>
    
<style>
/* 岗位 - 分享预览*/
.company-style .jobs-share-preview {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}

.company-style .jobs-share-preview.nav-top {
  background-position: center 46px;
}

.company-style .jobs-share-preview .header {
  display: flex;
  justify-content: space-between;
  flex: 1;
  padding: 20px 25px;
}

.company-style .jobs-share-preview.nav-top .header {
  padding: 66px 25px 20px;
}

.company-style .jobs-share-preview .header .logo {
  position: relative;
  display: flex;
  width: 160px;
  height: 60px;
  background-image: url("@/assets/img/company/jobs/template/logo01.png");
  background-repeat: no-repeat;
  background-position: 0 2px;
  background-size: auto 35px;
}

.company-style .jobs-share-preview .header .logo:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
}

.company-style .jobs-share-preview .header .time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 58px;
  border: 0.7px solid #fff;
  border-radius: 1px;
  color: #fff;
  line-height: 1;
}

.company-style .jobs-share-preview .header .time span:nth-child(1) {
  font-size: 24px;
}

.company-style .jobs-share-preview .header .time span:nth-child(2) {
  padding-top: 3px;
  font-size: 8px;
}

.company-style .jobs-share-preview .header .time span:nth-child(3) {
  padding-top: 3px;
  font-size: 10px;
}

.company-style .jobs-share-preview .main {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 15px;
  margin: 0 15px;
  background-color: rgba(255, 255, 255, 0.9);
}

.company-style .jobs-share-preview .main .job {
  display: flex;
  flex-direction: column;
}

.company-style .jobs-share-preview .main .job p {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.company-style .jobs-share-preview .main .job p + p {
  margin-top: 6px;
}

.company-style .jobs-share-preview .main .job p:nth-child(1) span {
  font-size: 19px;
  font-weight: 500;
  color: #d20000;
}

.company-style .jobs-share-preview .main .job p:nth-child(2) span {
  font-size: 18px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.company-style .jobs-share-preview .main .job p:nth-child(3) span {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.company-style .jobs-share-preview .main .job p span + span:before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin: 0 6px;
  background-color: #c8c8c8;
}

.company-style .jobs-share-preview .main .jobs {
  display: flex;
  flex-direction: column;
  padding-top: 3px;
}

.company-style .jobs-share-preview .main .jobs p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow: hidden;
}

.company-style .jobs-share-preview .main .jobs p + p {
  margin-top: 12px;
}

.company-style .jobs-share-preview .main .jobs p:nth-child(1) span {
  font-size: 13px;
  color: #666;
  line-height: 1;
}

.company-style .jobs-share-preview .main .jobs p:nth-child(2) span {
  font-size: 17px;
  font-weight: 500;
  color: #009fe8;
}

.company-style .jobs-share-preview .main .firm {
  display: flex;
  align-items: center;
  padding-top: 20px;
  border-top: 0.5px solid #d8d8d8;
  margin-top: 20px;
}

.company-style .jobs-share-preview .main .firm p.avatar {
  display: flex;
  flex: 0 0 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 12px;
  overflow: hidden;
}

.company-style .jobs-share-preview .main .firm p.info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  height: 50px;
  overflow: hidden;
}

.company-style .jobs-share-preview .main .firm p.qrcode {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 74px;
  height: 74px;
  border-radius: 3px;
  margin-left: 12px;
}

.company-style .jobs-share-preview .main .firm p img {
  width: 100%;
  height: 100%;
  border: none;
}

.company-style .jobs-share-preview .main .firm p b {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.company-style .jobs-share-preview .main .firm p span {
  font-size: 13px;
  color: #888;
}

.company-style .jobs-share-preview .footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 0 2px #666;
}

/*colour01*/
.company-style .jobs-share-preview.colour01 {
  background-image: url("@/assets/img/company/jobs/template/banner01.jpg");
  background-size: 100% 100%;
}

/*colour02 */
.company-style .jobs-share-preview.colour02 {
  background-image: url("@/assets/img/company/jobs/template/banner02.jpg");
}

.company-style .jobs-share-preview.colour02 .header .logo {
  background-image: url("@/assets/img/company/jobs/template/logo02.png");
}

.company-style .jobs-share-preview.colour02 .header .logo:after {
  background-color: #222;
}

.company-style .jobs-share-preview.colour02 .header .time {
  border-color: #222;
  color: #222;
}

.company-style .jobs-share-preview.colour02 .main .jobs p:nth-child(2) span {
  color: #222;
}

.company-style .jobs-share-preview.colour02 .footer {
  color: #222;
  text-shadow: 0 0 2px #fff;
}

/*colour03*/
.company-style .jobs-share-preview.colour03 {
  background-image: url("@/assets/img/company/jobs/template/banner03.jpg");
}

.company-style .jobs-share-preview.colour03 .main .jobs p:nth-child(2) span {
  color: #b66d3a;
}

/*colour04*/
.company-style .jobs-share-preview.colour04 {
  background-image: url("@/assets/img/company/jobs/template/banner04.jpg");
}

/*colour05*/
.company-style .jobs-share-preview.colour05 {
  background-image: url("@/assets/img/company/jobs/template/banner05.jpg");
  background-position-x: left;
}

.company-style .jobs-share-preview.colour05 .header .logo {
  background-image: url("@/assets/img/company/jobs/template/logo02.png");
}

.company-style .jobs-share-preview.colour05 .header .logo:after {
  background-color: #4e090e;
}

.company-style .jobs-share-preview.colour05 .header .time {
  border-color: #4e090e;
  color: #4e090e;
}

.company-style .jobs-share-preview.colour05 .main .jobs p:nth-child(2) span {
  color: #4e090e;
}

/*colour06 */
.company-style .jobs-share-preview.colour06 {
  background-image: url("@/assets/img/company/jobs/template/banner06.jpg");
}

.company-style .jobs-share-preview.colour06 .main .jobs p:nth-child(2) span {
  color: #db5a44;
}

/*colour07 */
.company-style .jobs-share-preview.colour07 {
  background-image: url("@/assets/img/company/jobs/template/banner07.jpg");
}

.company-style .jobs-share-preview.colour07 .main .jobs p:nth-child(2) span {
  color: #d57126;
}

/*colour08 */
.company-style .jobs-share-preview.colour08 {
  background-image: url("@/assets/img/company/jobs/template/banner08.jpg");
}

/*colour09 */
.company-style .jobs-share-preview.colour09 {
  background-image: url("@/assets/img/company/jobs/template/banner09.jpg");
}
</style>